<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { formRules } from "../utils/rule";
import { topUpProps } from "../utils/types";
import ReQrcode from "@/components/ReQrcode";
const props = withDefaults(defineProps<topUpProps>(), {
  formInline: () => ({
    id: 0,
    depositedAmount: 0
  })
});
import { useRole } from "../utils/hook";
const treeRef = ref();
const tableRef = ref();
const { allCustomer } = useRole(tableRef, treeRef);
const ruleFormRef = ref();
const radio = ref("25");
const showQr = ref(false);

const newFormInline = ref(props.formInline);
// console.log("xiugai ", props.formInline);
function getRef() {
  return ruleFormRef.value;
}
function onChecked() {
  showQr.value = false;
}
function generateQr() {
  console.log("generateQr", newFormInline.value.depositedAmount);
  // const code = addRecharge(toRaw(curData));
  showQr.value = true;
}
const user_name = localStorage.getItem("user_name");

const userStateBoolean = ref();
onMounted(() => {});

defineExpose({ getRef });
</script>

<template>
  <div>
    <div style="margin-bottom: 15px; display: flex; width: 100%">
      <el-radio-group
        v-model="newFormInline.depositedAmount"
        @change="onChecked()"
      >
        <el-radio value="15" size="large" border>15</el-radio>
        <el-radio value="20" size="large" border>20</el-radio>
        <el-radio value="25" size="large" border>25</el-radio>
        <el-radio value="30" size="large" border>30</el-radio>
        <el-radio value="50" size="large" border>50</el-radio>
      </el-radio-group>
    </div>

    <div>
      <el-form
        ref="ruleFormRef"
        :model="newFormInline"
        :rules="formRules"
        label-width="72px"
      >
        <el-form-item label="充值金额" prop="depositedAmount">
          <el-input
            v-model="newFormInline.depositedAmount"
            clearable
            style="width: 13rem"
            type="number"
            placeholder="请输入充值金额"
            @input="onChecked"
          />
        </el-form-item>
      </el-form>
    </div>
    <el-button v-if="!showQr" type="primary" @click="generateQr()"
      >确认</el-button
    ><br />
    <ReQrcode v-if="showQr" text="weixin://wxpay/bizpayurl?pr=Vpic2zMz3" />
  </div>
</template>
<style></style>
